<script setup>
import useChannel from '@/store/channel'

const props = defineProps({
  historyChannel: {
    type: Array,
    default: () => [],
  },
  isGroupMembers: {
    type: Boolean,
    default: false,
  },
  disabledMethod: Function,
})
defineExpose({
  open,
})
const emit = defineEmits(['addChat'])

const channelStore = useChannel()
const chatVisible = ref(false)
const searchValue = ref('')
// 选中数据id
const checkedIdsList = ref([])
// 选中人数
const checkedCount = ref(0)
// 已选中数据
const checkedListData = ref([])

const onceIds = ref([])

const filterChannelList = computed(() => {
  const membersList = channelStore.members?.map((i) => {
    i.name = i.realName
    if (props.disabledMethod) {
      i.disabled = props.disabledMethod(i)
    }
    return i
  })

  const channelList = channelStore.channelList

  return (props.isGroupMembers ? membersList : channelList).filter((i) => {
    if (props.disabledMethod) {
      i.disabled = props.disabledMethod(i)
    }
    return i?.name?.includes(searchValue.value)
  })
})

const channelListData = computed(() => {
  return props.isGroupMembers ? channelStore.members : channelStore.channelList
})

const selectedList = ref([])
watch(
  () => props.historyChannel,
  (val) => {
    selectedList.value = val
    checkedListData.value = val || []
    checkedIdsList.value = val?.map((i) => i.id)
    checkedCount.value = val.length
  },
  { immediate: true, deep: true }
)

function handleCheckedChannelChange(value) {
  checkedListData.value = channelListData.value?.filter((i) => value.includes(i.id))
  checkedCount.value = value.length
  onceIds.value = value
}
/**
 * 移除人员
 */
function handleColse(tag) {
  checkedIdsList.value = checkedIdsList.value?.filter((i) => i !== tag.id)
  checkedListData.value = checkedListData.value?.filter((i) => i.id !== tag.id)
  checkedCount.value = checkedIdsList.value.length
}

function submit() {
  // if (checkedListData.value.length !== 0) {
  chatVisible.value = false
  emit('addChat', checkedListData.value)
  // } else {
  //   ElMessage.warning('请选择人员')
  // }
}

function open() {
  chatVisible.value = true
  checkedListData.value = selectedList.value || []
  checkedIdsList.value = selectedList.value?.map((i) => i.id)
  checkedCount.value = selectedList.value.length
}

function close() {
  chatVisible.value = false
  onceIds.value = []
  clean()
}
function cancel() {
  chatVisible.value = false
  checkedListData.value = selectedList.value || []
  checkedIdsList.value = selectedList.value?.map((i) => i.id)
  checkedCount.value = selectedList.value.length
}
function clean() {
  searchValue.value = ''
  checkedIdsList.value = []
  checkedCount.value = 0
  checkedListData.value = []
}
</script>

<template>
  <TaskChatDialog
    v-model="chatVisible"
    :title="props.isGroupMembers ? '选择用户' : '选择会话'"
    width="820"
    @close="close"
    class="channel-choose-dialog"
    destory-on-close>
    <div class="chat-content">
      <div class="chat-left">
        <el-input class="search-input" v-model="searchValue" placeholder="搜索"></el-input>
        <div class="recently-chat">
          <span>最近聊天</span>
          <div class="chat-list">
            <el-checkbox-group v-model="checkedIdsList" @change="handleCheckedChannelChange">
              <el-checkbox
                v-for="item in filterChannelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled">
                {{ item.name }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="chat-right">
        <div class="number">
          已选择
          <span>{{ checkedCount }}/{{ channelListData.length }}</span>
        </div>
        <div class="tag-list">
          <el-tag
            v-for="tag in checkedListData"
            :key="tag.id"
            :closable="!tag.disabled"
            :disable-transitions="false"
            @close="handleColse(tag)">
            {{ tag.name }}
          </el-tag>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </TaskChatDialog>
</template>

<style lang="scss">
.el-dialog.fiz-eim-dialog.channel-choose-dialog {
  height: 500px;
  .fiz-eim-dialog-body {
    height: 100%;
    overflow: hidden;
  }
}
</style>
<style lang="scss" scoped>
.chat-content {
  height: 100%;
  @include use-flex(flex-start, space-between);
  .chat-left,
  .chat-right {
    width: 50%;
    height: 100%;
    overflow: auto;
  }
  .chat-right {
    padding: 0 20px;
    border-left: 1px solid #b6b4b4;
    .tag-list {
      .el-tag {
        margin: 5px;
      }
    }
  }
  .recently-chat {
    span {
      display: block;
      margin: 20px 0 10px;
      font-size: 12px;
      color: #b6b4b4;
    }
    .chat-list {
      .el-checkbox {
        display: flex;
      }
    }
  }
}
</style>
